<template>
  <div class="comment-list">
    <div class="comment-item" v-for="comment in commentList" :key="comment.id">
      <el-row type="flex" align="middle">
        <el-col :span="2">
          <div style="height: 50px;width: 50px;border-radius: 50%;overflow: hidden;">
            <img :src="baseImageUrl+comment.image" style="display: block;height: 100%;width: 100%" :alt="comment.image">
          </div>
        </el-col>
        <el-col :span="12">
          <h3 :title="comment.name" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{comment.name}}</h3>
        </el-col>
        <el-col :span="1" :offset="9">
          <el-button type="text" v-if="comment.vip.userId === loginId" @click="removeComment(comment.id)">删除</el-button>
        </el-col>
      </el-row>
      <div style="margin-top: 15px;">
        评论时间：{{comment.commentTime}}
      </div>
      <div style="margin-top: 15px">
        {{comment.content}}
      </div>
      <el-divider/>
    </div>
    <div style="text-align: center;margin-top: 15px">
      <el-pagination hide-on-single-page background layout="prev,pager,next" :total="pageInfo.total" :current-page="pageInfo.page" :page-size="pageInfo.limit"  @current-change="currentChange"></el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: 'CommentList',
  data () {
    return {
      baseImageUrl: process.env.VUE_APP_BASE_URL + '/img/',
      pageInfo: {
        page: 1,
        total: 0
      },
      commentList: [],
      loginId: ''
    }
  },
  props: {
    bookId: {
      type: Number,
      default: null
    },
    userId: {
      type: Number,
      default: null
    },
    limit: {
      type: Number,
      default: 5
    }
  },
  methods: {
    getCommentList () {
      // this.pageInfo.limit = this.limit
      // this.pageInfo.userId = this.userId
      // this.pageInfo.bookId = this.bookId

      this.pageInfo = {
        ...this.pageInfo,
        userId: this.userId,
        bookId: this.bookId,
        limit: this.limit
      }
      this.$http.get('api/comment/page', this.pageInfo).then(({ data }) => {
        // this.pageInfo.page = data.current
        // this.pageInfo.limit = data.size
        // this.pageInfo.total = data.total
        this.pageInfo = {
          ...this.pageInfo,
          page: data.current,
          limit: data.size,
          total: data.total
        }
        this.commentList = data.records.map(item => {
          return {
            ...item,
            name: this.bookId ? item.vip.name : item.book.bookName,
            image: this.bookId ? item.vip.avatar : item.book.cover
          }
        })
      })
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getCommentList()
    },
    removeComment (id) {
      this.$confirm('确定删除评论吗?').then(() => {
        this.$http.delete('api/comment/delete/' + id).then(() => {
          this.$message.success('删除成功')
          this.getCommentList()
        })
      })
    }
  },
  created () {
    this.getCommentList()
    this.loginId = JSON.parse(sessionStorage.getItem('vipInfo'))?.loginInfo?.userId
  }
}
</script>

<style scoped>

</style>
